<template>
    <div class="new-page" :style="`min-height: ${pageMinHeight}px`"> 
        <iframe frameborder="0" width="100%" :height="pageMinHeight" scrolling="yes" id="content" :src="src"></iframe>
    </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
    name: 'Iframe',
    data () {
        return {
            token: '',
            src: '',
            id: this.$route.query
        }
    },
    computed: {
        ...mapState('setting', ['isMobile', 'theme', 'layout', 'footerLinks', 'copyright', 'fixedHeader', 'fixedSideBar',
      'fixedTabs', 'hideSetting', 'multiPage', 'pageMinHeight'])
    },
    methods: {
        postMessage () {
            this.$nextTick(() => {
                let iframe = document.getElementById('content');
                let content = iframe.contentWindow;
                content.postMessage('主页面消息', '*')
            })
        }
    },
    created() {
        let articleId = this.$route.params.id;
        this.src = this.$route.meta.src + (articleId ? `&articleId=${articleId}` : '');
    }
}
</script>

<style lang="less" scoped>
  .admin-layout{
    .side-menu{
      &.fixed-side{
        position: fixed;
        height: 100vh;
        left: 0;
        top: 0;
      }
    }
    .virtual-side{
      transition: all 0.2s;
    }
    .virtual-header{
      transition: all 0.2s;
      opacity: 0;
      &.fixed-tabs.multi-page:not(.fixed-header){
        height: 0;
      }
    }
    .admin-layout-main{
      .admin-header{
        top: 0;
        right: 0;
        overflow: hidden;
        transition: all 0.2s;
        &.fixed-tabs.multi-page:not(.fixed-header){
          height: 0;
        }
      }
    }
    .admin-layout-content{
      padding: 15px 15px 0;
    }
    .setting{
      background-color: @primary-color;
      color: @base-bg-color;
      border-radius: 5px 0 0 5px;
      line-height: 40px;
      font-size: 22px;
      width: 40px;
      height: 40px;
      box-shadow: -2px 0 8px @shadow-color;
    }
  }
</style>